<template>
  <div class="nav">
    <div class="nav-go">
      <div>
        <div v-for="(item, index) in cateArr" :key="index">
          <div
            @click="scrollLocal(index)"
            class="nav-go-title"
            :style="{
              backgroundColor:
                index === currentChooseIndex ? '#74c869' : 'rgba(255, 255, 255, 0.6)',
            }"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="nav-box" ref="navBox" @scroll="trueCurrentLocal">
      <div v-for="(item, index) in navData" :key="index">
        <div class="nav-body">
          <nav-card>
            <template #header>
              <div class="headerTip" @click="changeBodyHeight(index)">
                <!-- <i class="iconfont iconchevronsupshuangshangjiantou"></i>s -->
                <pop-tip style="margin: 0 5px 0 10px">
                  <div style="font-size: 12px">{{ item.categoryDesc }}</div>
                </pop-tip>
                <span style="line-height: 40px">{{ item.category }}</span>
              </div>
            </template>
            <template #body>
              <div
                class="nav-body-item"
                :class="{ changeHeight: currentHeightIndex === index }"
              >
                <div v-for="(itemData, index) in item.navigation" :key="index">
                  <nav-item :ackData="itemData"></nav-item>
                </div>
              </div>
            </template>
          </nav-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavCard from "@/components/navCard.vue";
import NavItem from "./components/NavItem.vue";
import popTip from "../../../components/tipPop.vue";
import { scrollDomType, cateType, navType, ackDataType } from "./type";
import { ref, onMounted } from "vue";
import $axios from "@/http";

const cateArr = ref<Array<string>>([]);
const navData = ref<Array<navType>>([]);
const currentChooseIndex = ref<number>(0);
const scrollDom = ref<Array<scrollDomType>>([]);
const currentHeightIndex = ref<null | number>(null);
const navBox = ref<HTMLDivElement | null>(null);
onMounted(() => {
  searchNavigation();
});

const changeBodyHeight = (index: number) => {
  if (currentHeightIndex.value === null) {
    currentHeightIndex.value = index;
  } else if (currentHeightIndex.value === index) {
    currentHeightIndex.value = null;
  } else {
    currentHeightIndex.value = index;
  }
};
const scrollLocal = (index: number) => {
  if (scrollDom.value.length === 0) {
    let cardBody: NodeListOf<HTMLDivElement> = document.querySelectorAll(".nav-body");
    scrollDom.value = Array.from(cardBody).map((item) => {
      return {
        dom: item,
        local: item.offsetTop,
      };
    });
  } else {
    navBox.value && (navBox.value.scrollTop = scrollDom.value[index].local);
  }
};
const trueCurrentLocal = () => {
  if (scrollDom.value.length === 0) {
    let cardBody: NodeListOf<HTMLDivElement> = document.querySelectorAll(".nav-body");
    scrollDom.value = Array.from(cardBody).map((item) => {
      return {
        dom: item,
        local: item.offsetTop,
      };
    });
  } else {
    scrollDom.value.forEach((item, index) => {
      if (
        navBox.value &&
        navBox.value.scrollTop >= item.local &&
        navBox.value.scrollTop <= item.local + item.dom.clientHeight
      ) {
        currentChooseIndex.value = index;
      }
    });
  }
};
const searchNavigation = () => {
  $axios.get("/navigation/search").then((res) => {
    cateArr.value = Array.from(
      new Set(res.data.data.map((item: cateType) => item.category))
    );
    console.log(res);
    navData.value = cateArr.value.map((item) => {
      return {
        category: item,
        categoryDesc: "",
        navigation: [],
      };
    });
    navData.value.forEach((navItem) => {
      res.data.data.forEach((item: ackDataType) => {
        if (item.category === navItem.category) {
          navItem.navigation.push(item);
          navItem.categoryDesc = item.categoryDesc;
        }
      });
    });
  });
};
</script>

<style lang="scss" scoped>
.changeHeight {
  max-height: 0px;
  overflow: hidden;
}
.nav {
  padding: 30px 0 0 0;
  position: relative;
  width: 100%;
  height: 100%;
}
.nav-go {
  border-radius: 8px;
  width: 12%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3%;
  height: 500px;
  background-color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 5px;
  .nav-go-title {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    margin: 10px 0;
    font-size: 14px;
  }
}
.nav-box {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 60%;
  min-width: 620px;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow-y: auto;
  .nav-body {
    padding: 20px;
    .headerTip {
      text-align: center;
      color: #333;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav-body-item {
      display: flex;
      flex-wrap: wrap;
      transition: all 0.3s;
    }
  }
}
</style>
